<template>
    <div ref="content">
        <el-popover placement="bottom" width="400"  trigger="focus">
        <el-input v-model="filterText" type="textarea"  :rows="3"  @input="sysFilter1" slot="reference"></el-input>
        <el-tree :data="tableTreeData" ref="rolesTree" show-checkbox node-key="id"
                        :filter-node-method="filterNode"
                        :props="defaultProps" :default-checked-keys='checkedList' :highlight-current="true" @check="checkNode" 
                        >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span :class="!data.edit ? 'tree-name-color' : ''" style="font-size: 15px;font-weight: bold;">{{ node.label }}</span>
                        </span>
        </el-tree>
        </el-popover>
    </div>
</template>
<script>
import cashierApi from 'plugins/myaxios/salescashier/cashier.js';
import planApi from 'plugins/axios/planApi.js'
export default {
    name:'selectForCashFlow',
    props:['currentRow','filterText','isFlag'],
    created(){
        let self = this;
        self.init();
    },
    data(){
        return{
            tableTreeData:[],
            checkedList:[],/**选中菜单 */
            dialog:{/**弹框配置 */
                title:'',
                isShow:false
            },
            defaultProps:{
                children: 'children',
                label: 'name',
                id: 'id'
            },
        }
    },
    watch:{
       isFlag(newVal,oldVal){
        this.$refs.rolesTree.setCheckedKeys([]);
       }, 
    },
    methods:{
        init(){
            let self = this;
            self.getTreeDate();
        },
        submitDialogList(){
            let _this = this;
            let rolesTree = this.$refs.rolesTree;
            let arr = rolesTree.getHalfCheckedKeys().concat(rolesTree.getCheckedKeys());
            let nodeArr = rolesTree.getHalfCheckedNodes().concat(rolesTree.getCheckedNodes());
            let menuIds = arr.join(',');
            // let params = new URLSearchParams();
            // params.append("menuIds", menuIds);
            _this.currentRow.cashFlowBasePros=[];
             _this.currentRow.cashFlowBaseProsName=''; 
            arr.forEach((item,index,array)=>{
                 _this.currentRow.cashFlowBasePros.push({id:item});
            })
            nodeArr.forEach((item,index,array)=>{
                 _this.currentRow.cashFlowBaseProsName=_this.currentRow.cashFlowBaseProsName+item.proName+",";
            });
            _this.filterText = _this.currentRow.cashFlowBaseProsName;
            _this.sendDataToParent();
        },
        sendDataToParent(){
            let self = this;
            self.$emit('sendDataToParent', self.currentRow);
        },
        getTreeDate(){
            let self = this;
            cashierApi.getCashFlowBaseProTableData().then(res=>{
                self.tableTreeData = res.content;
            })
            // api.menuNodeAll().then(res=>{
            //     self.tableTreeData = res.content.children;
            // })
        },
        sysFilter1(value){
            let self = this;
            self.$refs['rolesTree'].filter(value);
        },
        filterNode(value, data) {
            console.log(value);
            if (!value) return true;
            return data.proName.indexOf(value) !== -1;
        },
        checkNode(nodeList,selectList){/**修改菜单选中 */
            let self = this;
            self.checkList=[];
            self.postSelectList=[];
            selectList.checkedNodes.forEach(el => {
                if(el.srcType==2){
                self.postSelectList.push({
                    id:null,
                    userId:self.selectUserId,
                    fileId:el.id,
                    parentId:el.parentId
                })
                self.checkList.push(el.id)
                }
            });
            self.submitDialogList();
        },
    },
}
</script>